<template>
  <div>

    <Row style="text-align: right;">
      <Button @click="back" type="text" icon="md-arrow-back">返回</Button>
      <i-col flex="auto">
        <Button type="info" >采购完成</Button>

        <Dropdown >
          <Button type="primary" icon="md-add">
            采退补换
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu  slot="list" style="text-align: center">
            <DropdownItem @click.native="addPurchase('1')">采购单</DropdownItem>
            <DropdownItem @click.native="addPurchase('5')" >欠货单(唯一)</DropdownItem>
            <DropdownItem @click.native="addPurchase('2')"divided>退货单(唯一)</DropdownItem>
            <DropdownItem @click.native="addPurchase('3')">补货单</DropdownItem>
<!--            <DropdownItem @click.native="addPurchase('4')">换货单</DropdownItem>-->
          </DropdownMenu>
        </Dropdown>
      </i-col>
    </Row>
    <divider></divider>
    <Row>

      <div style="padding: .8rem 0; width: 100%; border: solid 1px #f3f3f6; margin-bottom: 1rem">
        <span class="base_key">订单号:<span class="base_value">{{ this.$route.params.serialNumber }}</span></span>
        <span class="base_key">付款时间: <span
          class="base_value">{{
            $tiyBJTime(this.$route.params.checkoutTime)
          }}</span></span>
        <span class="base_key">国家: <span class="base_value">{{ this.$route.params.countryName }}</span></span>
        <span class="base_key">金额: <span class="base_value">US${{ this.$route.params.actualPayment }}</span></span>
        <span class="base_key">订单状态: <span
          v-if="orderStateEnum.filter(i => i.code === this.$route.params.orderState.state).length>0"
          class="base_value">{{ orderStateEnum.filter(i => i.code === this.$route.params.orderState.state)[0].cnName }}</span></span>
      </div>


      <Tabs size="small" type="card" style="width: 100%;padding-bottom: 4rem;">
        <TabPane label="全部产品">
          <div style="text-align: left;padding: 0.5rem 0">
            <Checkbox v-model="showNotPurchase">仅显示未采购的产品</Checkbox>
          </div>

          <List>
            <ListItem v-for="(product,index) in orderItemsFilter">
              <Row style="width: 100%;text-align: left;">
                <i-col :xs="24" :sm="2">
                  <img @click="showImage(yunPath + product.originalImagePath)" style="max-width: 85%;"
                       :src="yunPath+product.zipImage">
                </i-col>

                <i-col :xs="24" :sm="22">
                  <KeyValueView title="序号" :value="'#'+(index+1)"></KeyValueView>
                  <KeyValueView title="产品编码">
                    <a :href="$tiyProductUrl(product.productCode)" target="_blank">{{ product.productCode }}</a>
                  </KeyValueView>
                  <span style="margin-right: 0.5rem;" v-if="product.productSupplyList.length>0"
                        v-for="(supply,index) in product.productSupplyList">
                      <a target="_blank" :href="supply.url">货源:{{ index + 1 }}</a>
                    </span>

                  <br>
                  <KeyValueView title="产品名称">{{ product.productName }}</KeyValueView>
                  <br>
                  <span v-for="(item,index) in product.newOrderItemList" >
                        <Checkbox v-if="!showNotPurchase||(showNotPurchase&&item.purchaseOrderArray.length==0)" v-model="item.checked" border :style="{background:item.iconCheck?'#c8e6c9':'',margin:'0.25rem'}">
                          <KeyValueView :title="item.color+'/'+item.sizeName" >{{ item.amount }}</KeyValueView>
                            <span v-for="order in item.purchaseOrderArray">
                              <Icon type="ios-alert" :color="purchaseItemColor(order)"  style="margin-right: 0.3rem" />
                            </span>
                         </Checkbox>
                   </span>
                  <Row style="text-align:right; padding: 0.5rem 0" align="center" >

                    <span style="padding: 0.3rem 1rem;cursor:pointer;border: solid 1px #e0e0e0;margin: 0.2rem 0.5rem 0.2rem 0;border-radius: 6px"
                          v-for="(item,index) in product.orderPurchaseList" @click="filterItemProducts(item)" :class="mSelectedItemId===item.id?'mSelectedItemId':''">
                      <Icon type="ios-alert" :color="purchaseItemColor(item.id)"  style="margin-right: 0.3rem" />{{importItemName(item)}}

                    </span>

                    <i-col flex="auto">
                      <Button size="small"
                              @click.stop="joinPurchase(product,index,product.newOrderItemList,1)"
                              type="info">加入采购单
                      </Button>

                      <Dropdown >
                        <Button type="primary" size="small">
                          其他操作
                          <Icon type="ios-arrow-down"></Icon>
                        </Button>
                        <DropdownMenu  slot="list" style="text-align: center">
                          <DropdownItem @click.native="joinPurchase(product,index,product.newOrderItemList,2)" >加入退货单</DropdownItem>
                          <DropdownItem @click.native="joinPurchase(product,index,product.newOrderItemList,5)">加入欠货单</DropdownItem>
                        </DropdownMenu>
                      </Dropdown>
                    </i-col>
                  </Row>
                </i-col>
              </Row>
            </ListItem>
          </List>
        </TabPane>
        <TabPane :label="importItemName(item)" v-for="(item, index) in orderPurchaseList"
                 :icon="importItemIcon(item)" >
          <div style="text-align: left;border: solid 1px #e0e0e0;margin: 0.5rem 0; padding: 0.5rem">
            <span>
              <Tag color="success" v-if="item.type === 1&&isNotEmpty(item.purchaseNo)">采购单-已采购</Tag>
              <Tag color="blue" v-if="item.type === 1&&isEmpty(item.purchaseNo)">采购单-未采购</Tag>
            </span>

            <KeyValueView title="平台"  v-show="item.type !== 2 && item.type!==5">{{ getSource(item.source) }}</KeyValueView>
            <KeyValueView title="订单名" v-show="item.type !== 2 && item.type!==5">{{ item.innerName }}</KeyValueView>
            <span  v-if="item.type === 1">
            <span class="base_key">订单号:<span class="base_value">{{ item.purchaseNo }}</span></span>
            <span class="base_key">采购金额:<span class="base_value">{{ Math.abs(item.purchaseAmount) }}</span></span>
            <KeyValueView title="采购状态"  v-show="item.type <= 2">{{ getPurchaseStatus(item.purchaseStatus) }}</KeyValueView>
            <span class="base_key">采购时间:<span
              class="base_value">{{ $tiyBJTime(new Date(item.createTime).getTime()) }}</span></span>
          </span>


            <Button v-if="item.type!=2&&item.type!=5" size="small" @click.stop="showPurchase(item)" type="info" style="margin-right: 0.5rem">编辑</Button>
            <Button v-if="item.purchaseStatus==1" size="small" @click.stop="showOrderProduct(item)" icon="md-add" type="primary">产品</Button>
            <Tooltip v-else placement="right"  content="">
              <div slot="content">
                <p>已完成订单,该订单无法再添加产品！</p>
                <p>可以创建新的订单来完成操作</p>
              </div>
              <Button  ghost size="small" icon="md-add" type="primary">
                产品
              </Button>
            </Tooltip>
            <KeyValueView title="备注(内)" oneline v-show="isNotEmpty(item.innerNote)">{{item.innerNote}}</KeyValueView>
          </div>

            <List>
              <ListItem v-for="product in item.orderPurchaseProductList">
                <Row style="width: 100%;text-align: left;">
                  <i-col :xs="24" :sm="3">
                    <img style="width:99%;max-width:100px;max-height:100px;"
                         :src="yunPath+product.zipImage">
                  </i-col>
                  <i-col :xs="24" :sm="21">
                    <KeyValueView title="产品编码"><a :href="$tiyProductUrl(product.productCode)" target="_blank">{{ product.productCode }}</a></KeyValueView>
                    <br>
                    <KeyValueView title="产品名称">{{ product.productName }}</KeyValueView>
                    <br>
                    <KeyValueView title="备注(内)">{{ product.note == null ? '无' : product.note }}</KeyValueView>
                    <br>
                    <KeyValueView title="添加时间">{{ $tiyBJTime(new Date(product.createTime).getTime()) }}</KeyValueView>
                    <br>
                    <KeyValueView title="关联产品">{{ product.isAll === 1 ? '全部产品' : formatColorList(product.colorList) }}</KeyValueView>
                    <br>
                    <div v-if="isNotEmpty(product.refundInfo)&&Object.keys(product.refundInfo).length>0">
                      <KeyValueView  title="退货数量">{{product.refundInfo.refundCount}}</KeyValueView>
                      <KeyValueView  title="退款金额(元)">{{product.refundInfo.refundAmount}}</KeyValueView>
                      <KeyValueView  title="退货单号">{{product.refundInfo.refundNo}}</KeyValueView>
                    </div>
                  </i-col>
                </Row>
              </ListItem>
            </List>



        </TabPane>
      </Tabs>
    </Row>

    <!--查看图片弹出框-->
    <Modal v-model="tStatus.modalImage.isShow" title="" :styles="{align:'center'}" :scrollable=true>
      <div slot="footer"></div>
      <div align="center"><Img :src="tStatus.modalImage.url" style="max-width: 400px"/></div>
    </Modal>

    <!-- 添加产品 -->
    <Modal v-model="tStatus.productAdd.isShow" title="添加产品" :styles="{align:'center'}" width="60"
           :loading="tStatus.productAdd.isLoading"
           :scrollable=true
           @on-ok="addPurchaseProduct">

      <div>
        <div>
          <Checkbox v-model="isCheckAll" @on-change="handleCheckAll">全选</Checkbox>
          <Input placeholder="SKU过滤查询" v-model.trim="tStatus.sku" style="max-width:70% "></Input>
          <Button @click="skuFilter" type="info" size="small" ghost>过滤查询</Button>
        </div>
        <div class="base_key" v-show="isCheckAll" style="margin: .5rem 0">全选时,默认等同于选中了列表中所有产品的所有色卡</div>
        <Div style="margin: .5rem 0">
          <Checkbox @on-change="isDialogShowAllChange" v-model="isDialogShowAll">同时显示已经添加的产品</Checkbox>
        </Div>
      <divider></divider>
         <List>
        <ListItem v-for="(product,index) in pendingProductListFilter">
          <Row style="width: 100%;text-align: left;">
            <i-col   :sm="1">
              <Checkbox @on-change="checkChange(product)" v-model="product.check"></Checkbox>
            </i-col>
            <i-col  :sm="23">
              <Row>
                <i-col :xs="24" :sm="3">
                  <img style="width:99%;max-width:100px;max-height:100px;" @click="showImage(yunPath + product.originalImagePath)"
                       :src="yunPath+product.zipImage">
                </i-col>
                <i-col :xs="24" :sm="21">
                  <div>
                    <KeyValueView title="编号" >#{{ index+1 }}</KeyValueView>
                    <KeyValueView title="产品编码" ><a :href="$tiyProductUrl(product.productCode)" target="_blank">{{ product.productCode }}</a></KeyValueView>
                    <Checkbox v-model="product.noteCheck">需要添加备注</Checkbox>
                    <span v-if="purchaseType==2&&isEmpty(product.refundNo)"><Button @click="loggingRefundInfo(product,1)" type="info" size="small" >录入退货信息</Button></span>
                    <span v-if="purchaseType==2&&isNotEmpty(product.refundNo)"><Button @click="loggingRefundInfo(product,2)" type="info" size="small" >编辑退货信息</Button></span>
                  </div>

                  <KeyValueView title="产品名称" oneline>{{ product.productName }}</KeyValueView>
                  <div v-if="product.alreadyList.length>0" v-for="(color, colorIndex) in product.alreadyList"
                       style="background: rgb(200, 230, 201);padding: 0.2rem 0.3rem;margin: 0.2rem 0">
                    <KeyValueView  title="已添加" >{{ color.isAll === 1 ? '全部产品' : formatColorList(color.colorList) }}</KeyValueView>
                    <KeyValueView  title="备注" >{{isEmpty(color.note)?'无':color.note}}</KeyValueView>
                  </div>
                  <Input v-if="product.noteCheck" :rows="1" type="textarea" v-model.trim="product.note" style="margin: 0.5rem 0" maxlength="800"
                         placeholder="备注"></Input>
                  <span v-if="purchaseType==2&&isNotEmpty(product.refundNo)">
                      <KeyValueView title="退货数量" v-model.trim="product.refundCount">
                      </KeyValueView>
                      <KeyValueView title="退款金额(元)" v-model.trim="product.refundAmount">
                      </KeyValueView>
                      <KeyValueView title="退款单号" v-model.trim="product.refundNo" >
                      </KeyValueView>
                  </span>
                </i-col>
              </Row>
              <div style="padding: 0.25rem 0">
              <span v-for="item in product.newOrderItemList">
                  <Checkbox @on-change="colorOnChange(item,product)" v-model="item.checked" border style="margin: 0.2rem">
                    <KeyValueView :title="item.color+'/'+item.sizeName">{{ item.amount }}</KeyValueView>
                  </Checkbox>
              </span>
              </div>

            </i-col>

          </Row>
        </ListItem>
      </List>
      </div>
    </Modal>

    <!--加入采购单-->
    <Modal
      v-model="tStatus.joinPurchaseAdd.isShow"
      :title="tStatus.joinPurchaseAdd.name"
      width="60"
      :closable="true"
      :mask-closable="false"
      :loading="tStatus.joinPurchaseAdd.isLoading"
      @on-ok="addJoinPurchase('formJoinPurchase')">
      <Form ref="formJoinPurchase" :model="tData.orderPurchaseProduct" :rules="tStatus.ruleValidate" :label-width="80">

        <Row>
          <i-col flex="1">
            <FormItem :label-width=85 :label="tStatus.joinPurchaseAdd.label1" prop="">
              <span v-if="tData.orderPurchaseProduct.isAll==1">全部产品</span>
              <span v-if="tData.orderPurchaseProduct.isAll==2">部分产品</span>
              <p v-if="tData.orderPurchaseProduct.isAll==2" >{{formatColorList(tData.orderPurchaseProduct.colorList)}}</p>
            </FormItem>

            <FormItem :label-width=85 :label="tStatus.joinPurchaseAdd.label2" prop="orderPurchaseId">
              <Select style="width:12rem;" v-model="tData.orderPurchaseProduct.orderPurchaseId" @on-change="selectPurchase" placeholder="请选择采购单">
                <Option v-for="(item, index) in leftOrderPurchaseList" :value="item.id" :key="item.id">
                  {{ importItemName(item) }}
                </Option>
              </Select>
            </FormItem>
          </i-col>
        </Row>

        <Row v-if="purchaseType==2">
          <i-col flex="1">
            <FormItem :label-width=85 label="退货数量:">
              <InputNumber :min="0" v-model="tData.orderPurchaseProduct.refundInfo.refundCount" style="width:5rem;" ></InputNumber>
            </FormItem>
            <FormItem :label-width=85 label="退款金额(元):">
              <InputNumber :min="0" v-model="tData.orderPurchaseProduct.refundInfo.refundAmount" style="width:5rem;" ></InputNumber>
            </FormItem>
            <FormItem :label-width=85 label="退款单号:">
              <input  style="width:12rem;" v-model="tData.orderPurchaseProduct.refundInfo.refundNo"></input>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col flex="1">
            <FormItem :label-width=85 label="产品备注:">
              <Input :rows="3" type="textarea" style="width:90%;" v-model="tData.orderPurchaseProduct.note"
                     placeholder="请输入采购产品的备注信息"></Input>
            </FormItem>
          </i-col>
        </Row>
      </Form>
    </Modal>

    <!--新增采购单-->
    <Modal
      v-model="tStatus.modalAdd_cai.isShow"
      title="新增采购单"
      width="60"
      :closable="true"
      :mask-closable="false"
      :loading="tStatus.modalAdd_cai.isLoading"
      @on-ok="handleSubmit('formValidate')">
      <Form ref="formValidate" :model="tData.orderPurchase" :rules="tStatus.ruleValidate" :label-width="80">
        <Alert type="warning">
          一个采购单对应着一个 1688 订单. 当 1688 提交订单有订单号时, 一定要及时把订单号和金额补录进来.
        </Alert>
        <Row>
          <i-col flex="1">
            <FormItem :label-width=120 label="内部代号(内):" prop="innerName">
              <Input style="width:100%;" minlength="50" v-model.trim="tData.orderPurchase.innerName"
                     placeholder="例如: 1688-1"></Input>
            </FormItem>
          </i-col>
          <i-col flex="1">
            <FormItem :label-width=85 label="采购平台:" prop="source">
              <Select style="width:12rem;" v-model="tData.orderPurchase.source">
                <Option value="1">1688</Option>
                <Option value="2">淘宝</Option>
                <Option value="3">拼多多</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col flex="1">
            <FormItem :label-width=85 :label="labelName">
              <Input style="width:12rem;" maxlength="50"
                     v-model.trim="tData.orderPurchase.purchaseNo"
                     placeholder="1688订单号"></Input>
            </FormItem>
          </i-col>
          <i-col flex="1">
            <FormItem :label-width=85  label="采购金额:">
              <InputNumber :min="0" style="width:12rem;" v-model.trim="tData.orderPurchase.purchaseAmount"
                           placeholder="1688实际支付金额"></InputNumber>
            </FormItem>
          </i-col>
          <i-col flex="1">
            <FormItem :label-width=85  label="采购状态:">
              <Select style="width:12rem;" v-model="tData.orderPurchase.purchaseStatus">
                <Option value="1">未下单</Option>
                <Option value="2">已下单未支付</Option>
                <Option value="3">已下单已支付</Option>
                <Option value="4">废弃</Option>
              </Select>
            </FormItem>
          </i-col>
        </Row>

        <Row>
          <i-col flex="1">
            <FormItem :label-width=120 label="其他备注(内):" prop="innerNote">
              <Input style="width:80%;" v-model.trim="tData.orderPurchase.innerNote" maxlength="800" show-word-limit
                     type="textarea" placeholder="额外补充"></Input>
            </FormItem>
          </i-col>
        </Row>

      </Form>
    </Modal>

    <!--新增退货单-->
    <Modal
      v-model="tStatus.modalAdd_tui.isShow"
      title="新增退货单"
      width="60"
      :closable="true"
      :mask-closable="false"
      :loading="tStatus.modalAdd_tui.isLoading"
      @on-ok="handleSubmit('formValidate2')">
      <Form ref="formValidate2" :model="tData.orderPurchase" :rules="tStatus.ruleValidate" :label-width="80">
        <Alert type="warning">
         1.每个订单只能有一个退货单
        </Alert>
        <Row>
          <i-col flex="1">
            <FormItem :label-width=120 label="内部代号(内):" prop="innerName">
              <Input style="width:80%;" maxlength="50" v-model.trim="tData.orderPurchase.innerName"
                     placeholder="例如: 退-1"></Input>
            </FormItem>
          </i-col>
        </Row>

        <Row>
          <i-col flex="1">
            <FormItem :label-width=120 label="其他备注(内):" prop="innerNote">
              <Input style="width:80%;" v-model.trim="tData.orderPurchase.innerNote" maxlength="800" show-word-limit
                     type="textarea" placeholder="额外补充"></Input>
            </FormItem>
          </i-col>
        </Row>

      </Form>
    </Modal>

    <!--新增补货单-->
    <Modal
      v-model="tStatus.modalAdd_bu.isShow"
      title="新增补货单"
      width="60"
      :closable="true"
      :mask-closable="false"
      :loading="tStatus.modalAdd_bu.isLoading"
      @on-ok="handleSubmit('formValidate3')">
      <Form ref="formValidate3" :model="tData.orderPurchase" :rules="tStatus.ruleValidate" :label-width="80">
        <Alert type="warning">补货单是一种特殊的采购单, 都对应着 1688 中的一个订单</Alert>
        <Row>
          <i-col flex="1">
            <FormItem :label-width=120 label="内部代号(内):" prop="innerName">
              <Input style="width:100%;" maxlength="50" v-model.trim="tData.orderPurchase.innerName"
                     placeholder="例如: 换-1"></Input>
            </FormItem>
          </i-col>
          <i-col flex="1">
            <FormItem :label-width=85 label="补货平台:" prop="source">
              <Select style="width:12rem;" v-model="tData.orderPurchase.source">
                <Option value="1">1688</Option>
                <Option value="2">淘宝</Option>
                <Option value="3">拼多多</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col flex="1">
            <FormItem :label-width=85 :label="labelName">
              <Input style="width:12rem;" maxlength="50"
                     v-model.trim="tData.orderPurchase.purchaseNo"
                     placeholder="1688订单号"></Input>
            </FormItem>
          </i-col>
          <i-col flex="1">
            <FormItem :label-width=85  label="金额(元):">
              <InputNumber :min="0" style="width:12rem;" v-model.trim="tData.orderPurchase.purchaseAmount"
                           placeholder="额外支出金额,为负数代表收入"></InputNumber>
            </FormItem>
          </i-col>
          <i-col flex="1">
            <FormItem :label-width=85  label="状态:">
              <Select style="width:12rem;" v-model="tData.orderPurchase.purchaseStatus">
                <Option value="2">已下单未支付</Option>
                <Option value="3">已下单已支付</Option>
                <Option value="4">废弃</Option>
              </Select>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col flex="1">
            <FormItem :label-width=120 label="其他备注(内):" prop="innerNote">
              <Input style="width:80%;" v-model.trim="tData.orderPurchase.innerNote" maxlength="800" show-word-limit
                     type="textarea" placeholder="额外补充"></Input>
            </FormItem>
          </i-col>
        </Row>
      </Form>
    </Modal>

    <!--新增换货单-->
    <Modal
      v-model="tStatus.modalAdd_huan.isShow"
      title="新增换货单"
      width="60"
      :closable="true"
      :mask-closable="false"
      :loading="tStatus.modalAdd_huan.isLoading"
      @on-ok="handleSubmit('formValidate4')">
      <Form ref="formValidate4" :model="tData.orderPurchase" :rules="tStatus.ruleValidate" :label-width="80">
        <Row>
          <i-col flex="1">
            <FormItem :label-width=85 label="换货平台:" prop="source">
              <Select style="width:12rem;" v-model="tData.orderPurchase.source">
                <Option value="1">1688</Option>
                <Option value="2">淘宝</Option>
                <Option value="3">拼多多</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col flex="1">
            <FormItem :label-width=100 label="退款总金额:">
              <InputNumber :min="0" style="width:12rem;" v-model.trim="tData.orderPurchase.purchaseAmount"
                           placeholder="实际退款金额"></InputNumber>
            </FormItem>
          </i-col>

          <i-col flex="1">
            <FormItem :label-width=100 label="退款状态:">
              <Select style="width:12rem;" v-model="tData.orderPurchase.moneyStatus">
                <Option value="1">退货退款中</Option>
                <Option value="2">全部款项已退回</Option>
              </Select>
            </FormItem>
          </i-col>
        </Row>

        <Row>
          <i-col flex="1">
            <FormItem :label-width=120 label="其他备注(内):" prop="innerNote">
              <Input style="width:80%;" v-model.trim="tData.orderPurchase.innerNote" maxlength="800" show-word-limit
                     type="textarea" placeholder="额外补充"></Input>
            </FormItem>
          </i-col>
        </Row>
      </Form>
    </Modal>

    <!--录入退货信息-->
    <Modal
      v-model="tStatus.modalRefund.isShow"
      title="录入退货信息"
      width="60"
      :loading="tStatus.modalRefund.isLoading"
      :closable="true"
      :mask-closable="false"
      @on-ok="handleRefundInfo('refundValidate')">
      <Form ref="refundValidate" :model="tStatus.modalRefund.refundInfo" :rules="tStatus.refundValidate" :label-width="80">
        <Row>
          <i-col flex="1">
            <FormItem :label-width=120 label="退货数量:" prop="refundCount">
              <InputNumber :min="0" v-model="tStatus.modalRefund.refundInfo.refundCount" style="width:5rem;" ></InputNumber>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col flex="1">
            <FormItem :label-width=120 label="退款金额(元):" prop="refundAmount">
              <InputNumber :min="0" v-model="tStatus.modalRefund.refundInfo.refundAmount" style="width:5rem;" ></InputNumber>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col flex="1">
            <FormItem :label-width=120 label="退款单号:" prop="refundNo">
              <input  style="width:12rem;" placeholder="1688订单号" v-model="tStatus.modalRefund.refundInfo.refundNo"></input>
            </FormItem>
          </i-col>
        </Row>
      </Form>
    </Modal>

  </div>
</template>

<script>
import KeyValueView from "../widgets/KeyValueView";
import {isEmpty, isNotEmpty} from "../js/commonUtils";
import tiyData from "./js/OrderImportProducts/orderImportProduct_data";
import {addOrderPurchase, addPurchaseProduct, joinPurchaseOrder,handleRefundInfo} from "./js/OrderImportProducts/orderImportProduct_fun";

export default {
  name: "OrderNewList",
  components: {KeyValueView},
  data() {
    return {
      tStatus: tiyData.tStatus,
      tData: tiyData.tData,
      isCheckAll:false,//添加产品-全选
      isDialogShowAll:false,//同时显示已经添加的产品
      purchaseOrderSelected:{},//选中的采购单
      purchaseType:1,//添加产品-采购单类型
      defaultIndex: '-1',
      yunPath: this.$store.getters.imgPrefix,
      orderItems: [],
      orderItemsFilter: [],
      orderPurchaseList: [],
      leftOrderPurchaseList: [],//剩下的采购单
      pendingProductList: [],//待添加产品
      pendingProductListFilter: [],//待添加产品-过滤后
      orderPurchaseId: '',
      orderStateEnum: this.$store.getters.order.orderStateEnum,//枚举 订单状态
      tempProducts: [],
      showNotPurchase:false,
      mSelectedItemId:"",
    }
  },
  methods: {
     colorOnChange(item,product){
       let tem=false;
       product.newOrderItemList.forEach(function(color){
         if(color.checked){
           tem=true;
         }
       })
       product.check=tem;
     },
     selectPurchase(value){
       let self=this;
       self.leftOrderPurchaseList.forEach(function (item){
         if(item.id==value){
           self.purchaseType=item.type;
         }
       })
     },
    skuFilter(){
     let self=this;
     if(isEmpty(tiyData.tStatus.sku)){
       self.pendingProductListFilter = [...self.pendingProductList];
     }else{
       self.pendingProductListFilter=self.pendingProductListFilter.filter(item=>{
         return item.productCode==tiyData.tStatus.sku.trim();
       });
     }
    },
    //生成产品色卡和采购单关系
    createProductItemAndPurchase(){
      let self=this;
      self.orderItems.forEach(function(product){
        product.newOrderItemList.forEach(function (orderItem){
          orderItem.purchaseOrderArray=[];
        })
      })
      self.orderPurchaseList.forEach(function(orderPurchase){
          orderPurchase.orderPurchaseProductList.forEach(function(purchaseProduct){
            self.orderItems.forEach(function(product){
              if(product.productId==purchaseProduct.productId){
                if(purchaseProduct.isAll==1){
                  product.newOrderItemList.forEach(function (orderItem){
                    orderItem.purchaseOrderArray.push(orderPurchase.id);
                  })
                }
                if(purchaseProduct.isAll==2){
                  product.newOrderItemList.forEach(function (orderItem){
                    purchaseProduct.colorList.forEach(function (color){
                      if(orderItem.id==color.orderItemId){
                        orderItem.purchaseOrderArray.push(orderPurchase.id);
                      }
                      else if(orderItem.color==color.color&&orderItem.sizeName==color.sizeName){
                        orderItem.purchaseOrderArray.push(orderPurchase.id);
                      }
                    })
                  })
                }
              }
            })

          })
      })
    },
    filterItemProducts(item){
      let self=this;
      self.orderItems.forEach(function(product){
        product.newOrderItemList.forEach(function (orderItem){
          orderItem.iconCheck=false;
        })
      })
      if (self.mSelectedItemId===item.id){
        self.mSelectedItemId = "";
      }else{
        self.mSelectedItemId = item.id;
        self.orderItems.forEach(function(product){
          product.newOrderItemList.forEach(function (orderItem){
            if(orderItem.purchaseOrderArray.indexOf(item.id)>-1){
              orderItem.iconCheck=true;
            }
          })
        })
      }
    },
    importItemIcon(item){
      if (item.type === 1 && isNotEmpty(item.purchaseNo)){
        return 'ios-checkmark-circle'
      }else{
        return ''
      }
    },
    importItemName(item){
      var pre = "";
      if (item.type === 1){
        pre = "(采)";
      }
      if (item.type===2){
        pre = "";
      }
      if (item.type===3){
        pre = "(补)";
      }
      if (item.type===4){
        pre = "(换)";
      }
    return item.innerName+" "+pre;
    },
    formatColorList(colorList){
      if(isEmpty(colorList)){
        return '';
      }
      let str='';
      colorList.forEach(function(item){
        str+=`${item.color}/${item.sizeName}:${item.amount}; `;
      })
      return str;
    },
    //产品加入采购单
    joinPurchase(product, index,newOrderItemList,type) {
      let self = this;
      self.leftOrderPurchaseList = self.orderPurchaseList.filter(item => {
        return item.type==type;
      })
      tiyData.tData.orderPurchaseProduct.orderPurchaseId = '';
      tiyData.tData.orderPurchaseProduct.productId = product.productId;
      tiyData.tData.orderPurchaseProduct.productCode = product.productCode;
      tiyData.tData.orderPurchaseProduct.productName = product.productName;
      tiyData.tData.orderPurchaseProduct.purchaseCount = product.purchaseCount;
      tiyData.tData.orderPurchaseProduct.zipImage = product.zipImage;
      tiyData.tData.orderPurchaseProduct.index = index;
      tiyData.tData.orderPurchaseProduct.note = null;
      tiyData.tData.orderPurchaseProduct.purchaseCount = 0;
      tiyData.tData.orderPurchaseProduct.isAll=1;
      tiyData.tData.orderPurchaseProduct.refundInfo={
        refundCount:0,
        refundAmount:0,
        refundNo:'',
      };
      tiyData.tData.orderPurchaseProduct.colorList.splice(0,tiyData.tData.orderPurchaseProduct.colorList.length);
      self.purchaseType=1;
      let colorList=[];
      let checkLength=0;
      newOrderItemList.forEach(function(item){
        if(item.checked){
          checkLength++;
          let color={
            "orderItemId":item.id,
            "color":item.color,
            "sizeName":item.sizeName,
            "amount":item.amount,
          }
          colorList.push(color);
        }
      })
      if(checkLength!=0&&newOrderItemList.length!=checkLength){
        tiyData.tData.orderPurchaseProduct.isAll=2;
        tiyData.tData.orderPurchaseProduct.colorList=[...colorList];
      }
      let title='';
      switch (type){
        case 1:
          title='采购';
          break;
        case 2:
          title='退货';
          break;
        case 5:
          title='欠货';
          break;
        default:
          title='采购';
      }
      this.tStatus.joinPurchaseAdd.title = `加入${title}单`;
      this.tStatus.joinPurchaseAdd.label1 = `${title}产品:`;
      this.tStatus.joinPurchaseAdd.label2 = `${title}单:`;
      this.tStatus.joinPurchaseAdd.isShow = true;
    },
    addJoinPurchase(name) {
      joinPurchaseOrder(this, tiyData, name);
    },
    handleRefundInfo(name){
      handleRefundInfo(this, tiyData, name);
    },
    handleSubmit(name) {
      let self=this;
      let bool=false;
      if(tiyData.tData.orderPurchase.type==2&&isEmpty(tiyData.tData.orderPurchase.id)){//每个订单只有一个退货单
        self.orderPurchaseList.forEach(function(item){
          if(item.type==2){
            bool=true;
            return;
          }
        })
      }
      if(bool){
        self.$Message.error("每个订单只能有一个退货单");
        return;
      }
      addOrderPurchase(this, tiyData, name)
    },
    isDialogShowAllChange(){
      let self=this;
      if(self.isDialogShowAll){
        self.pendingProductListFilter=[...self.orderItems];
        self.pendingProductListFilter.forEach(function(f){
          f.alreadyList=[];
        })
        self.pendingProductListFilter.forEach(function(product1){
          self.purchaseOrderSelected.orderPurchaseProductList.forEach(function (product2){
            if(product2.productId==product1.productId){
              let obj={
                isAll:product2.isAll,
                colorList:product2.colorList,
                note:product2.note,
              } //已添加产品列表
              product1.alreadyList.push(obj);
            }
          })
        })
      }else{
        self.purchaseOrderSelected.orderPurchaseProductList.forEach(function (product) {
          self.pendingProductListFilter.splice(self.pendingProductListFilter.findIndex(item => item.productId == product.productId), 1);
        })
      }
    },
    loggingRefundInfo(product,type,){
      tiyData.tStatus.modalRefund.productId = product.productId;
      if(type==1){
        tiyData.tStatus.modalRefund.refundInfo.refundAmount="";
        tiyData.tStatus.modalRefund.refundInfo.refundCount="";
        tiyData.tStatus.modalRefund.refundInfo.refundNo="";
      }
      if(type==2){
        tiyData.tStatus.modalRefund.refundInfo.refundAmount=product.refundAmount;
        tiyData.tStatus.modalRefund.refundInfo.refundCount=product.refundCount;
        tiyData.tStatus.modalRefund.refundInfo.refundNo=product.refundNo;
      }
      this.tStatus.modalRefund.isShow = true;
    },
    checkChange(product) {
      let self=this;
      self.isCheckAll=true;
      self.pendingProductListFilter.forEach(function(item){
        if(item.check==false){
          self.isCheckAll=false;
        }
      })

      product.newOrderItemList.forEach(function(item){
        item.checked=product.check;
      })

    },
    handleCheckAll(){
      let self=this;
      self.pendingProductListFilter.forEach(function(item){
        item.check=self.isCheckAll;
        item.newOrderItemList.forEach(function (color){
          color.checked=self.isCheckAll;
        })
      })
    },
    showOrderProduct(item) {
      let self = this;
      self.purchaseOrderSelected=item;
      tiyData.tStatus.sku='';
      self.isCheckAll=false;
      self.isDialogShowAll=false;
      self.purchaseType=item.type;
      self.orderItems.forEach(function (i){
        i.alreadyList=[];
      })
      self.pendingProductList = [...self.orderItems];
      self.orderPurchaseId = item.id;
      item.orderPurchaseProductList.forEach(function (product) {
        self.pendingProductList.splice(self.pendingProductList.findIndex(item => item.productId == product.productId), 1);
      })
      self.pendingProductListFilter=[...self.pendingProductList];

      self.pendingProductListFilter.forEach(function(product){
        product.refundAmount=0;
        product.refundCount=0;
        product.refundNo='';
      })
      self.tStatus.productAdd.isShow = true;
    },
    addPurchaseProduct() {
      addPurchaseProduct(this, tiyData);
    },
    isEmpty(val) {
      return isEmpty(val);
    },
    isNotEmpty(val) {
      return isNotEmpty(val);
    },
    back() {
      this.$router.go(-1);
      //this.$router.push('/order-new/orderList');
    },
    getSource(type) {
      let sourceName = '';
      switch (type) {
        case 1:
          sourceName = "1688";
          break;
        case 2:
          sourceName = "淘宝";
          break;
        case 3:
          sourceName = "拼多多";
          break;
        default:
          break;
      }
      return sourceName;
    },
    getPurchaseStatus(status) {
      let statusName = '';
      switch (status) {
        case 1:
          statusName = "未下单";
          break;
        case 2:
          statusName = "已下单未支付";
          break;
        case 3:
          statusName = "已下单已支付";
          break;
        case 4:
          statusName = "废弃";
          break;
        default:
          break;
      }
      return statusName;
    },
    showPurchase(orderPurchase) {
      tiyData.tData.orderPurchase.id = orderPurchase.id;
      tiyData.tData.orderPurchase.source = orderPurchase.source + '';
      tiyData.tData.orderPurchase.type = orderPurchase.type + '';
      tiyData.tData.orderPurchase.purchaseStatus = orderPurchase.purchaseStatus + '';
      tiyData.tData.orderPurchase.purchaseAmount = Math.abs(orderPurchase.purchaseAmount);
      tiyData.tData.orderPurchase.innerNote = orderPurchase.innerNote;
      tiyData.tData.orderPurchase.innerName = orderPurchase.innerName;
      tiyData.tData.orderPurchase.recipient = orderPurchase.recipient;
      tiyData.tData.orderPurchase.purchaseNo = orderPurchase.purchaseNo;

      if(orderPurchase.type==1){
        this.tStatus.modalAdd_cai.isShow = true;
      }
      if(orderPurchase.type==2){
        this.tStatus.modalAdd_tui.isShow = true;
      }
      if(orderPurchase.type==3){
        this.tStatus.modalAdd_bu.isShow = true;
      }
      if(orderPurchase.type==4){
        this.tStatus.modalAdd_huan.isShow = true;
      }
    },
    addPurchase(type) {
      if(type==2){
        let self=this;
        let bool=false;
        self.orderPurchaseList.forEach(function(item){
          if(item.type==2){
            bool=true;
            return;
          }
        })
        if(bool){
          self.$Message.error("每个订单只能有一个退货单");
          return;
        }
      }

      tiyData.tData.orderPurchase.source = '1';
      tiyData.tData.orderPurchase.type = type;
      tiyData.tData.orderPurchase.purchaseAmount = 0;
      tiyData.tData.orderPurchase.innerNote = '';
      tiyData.tData.orderPurchase.innerName = '';
      tiyData.tData.orderPurchase.recipient = '';
      tiyData.tData.orderPurchase.purchaseNo = '';
      tiyData.tData.orderPurchase.purchaseStatus ='1';
      tiyData.tData.orderPurchase.id = '';
      if(type==1){
        this.tStatus.modalAdd_cai.isShow = true;
      }
      if(type==2){
        tiyData.tData.orderPurchase.innerName = '退货产品';
        this.handleSubmit('formValidate2')
      }
      if(type==3){
        this.tStatus.modalAdd_bu.isShow = true;
      }
      if(type==4){
        this.tStatus.modalAdd_huan.isShow = true;
      }
      if(type==5){
        tiyData.tData.orderPurchase.innerName = '欠货产品';
        this.handleSubmit('formValidate2')
      }
    },

    showImage(imageUrl) {
      tiyData.tStatus.modalImage.url = imageUrl;
      tiyData.tStatus.modalImage.isShow = true;
    },
    purchaseItemColor(id){
      let colors = ["#4caf50","#009688","#786548","#ffeb3b","#607d8b","#9c27b0","#e91e63","#ff9800","#3f51b5","#00bcd4"];
      let colorValue = "";
      this.orderPurchaseList.forEach(function (item,index) {
          if (id===item.id){
            colorValue = colors[index-1];
          }
      });
      return colorValue;

    },

    queryOrderItemList(id) {
      let self = this;
      let param = {
        "id": id,
      };
      self.orderItems.splice(0, self.orderItems.length);
      self.orderPurchaseList.splice(0, self.orderPurchaseList.length);
      self.$apiNewOrder.getOrderItemList(param).then(function (response) {
        if (response.success) {
          let orderItemList = response.result.newOrderProductList;
          let orderPurchaseList = response.result.orderPurchaseList;

          self.orderItems=[...orderItemList];
          self.orderItemsFilter=[...orderItemList];
          self.orderPurchaseList=[...orderPurchaseList];
          self.createProductItemAndPurchase();
        }
      });
    },
  },
  mounted() {
    this.tData.orderPurchase.orderId = this.$route.params.id;
    this.queryOrderItemList(this.$route.params.id);
  },
  watch:{
    showNotPurchase:function(val){
      let self=this;
      self.orderItemsFilter.splice(0,self.orderItemsFilter.length);
      if(val){
        self.orderItems.forEach(function(item){
          if(item.orderPurchaseList.length==0){
            self.orderItemsFilter.push(item);
          }else{
            for(let i=0;i<item.newOrderItemList.length;i++){
              if(item.newOrderItemList[i].purchaseOrderArray.length==0){
                self.orderItemsFilter.push(item);
                break;
              }
            }
          }

        })
      }else{
        self.orderItemsFilter=[...self.orderItems];
      }
    }
  },
  computed: {
    labelName() {
      if (tiyData.tData.orderPurchase.type == '1') {
        return '采购单号:';
      }
      if (tiyData.tData.orderPurchase.type == '2') {
        return '退货单号:';
      }
      if (tiyData.tData.orderPurchase.type == '3') {
        return '补货单号:';
      }
      if (tiyData.tData.orderPurchase.type == '4') {
        return '换货单号:';
      }
    },
  }
}
</script>

<style scoped lang="less">
@import  (once,optional) "../css/base.less";

.base_key {
  color: #777 !important;
}
.mSelectedItemId{
  background: #4caf50;
  color: white;
}

</style>
